<template>
	<div class="center_right_exam">
		<div class="center_rightlabel_navs">
			<div @click="changeType(item)" :class="type == item.value ? 'active' : ''" class="center_rightlabel_nav"
				v-for="item in types">{{ item.name }}</div>
		</div>
		<div class="center_right">
			<div class="center_rightcont beautifulScroll" v-if="type == 'DCM'">
				<div class="center_rightable">
					<div class="center_rightable_search">
						<el-select @change='currentChange(1)' v-model="modalityId" placeholder="请选择检查方式" size='small'
							style="width:200px;margin: 0 10px 0 0;" clearable>
							<el-option v-for="item in modalitys" :key="item.modalityId" :label="item.modalityName"
								:value="item.modalityId">
							</el-option>
						</el-select>
						<el-input @keyup.enter.native="currentChange(1)" placeholder="请输入病例名称"
							prefix-icon="el-icon-search" v-model="dcmName" size='small'
							style="width:200px;margin: 0 10px 0 0;" clearable />
						<el-button type="primary" @click="currentChange(1)" size='small'>搜索</el-button>
						<el-button type="primary" @click="research" size='small'>重置</el-button>
					</div>
					<div class="clearfix">
						<emptymain :emptytext="'暂无数据'" :emptyheight="'550px'" :emptylist='dataList'>
							<span></span>
						</emptymain>
						<div class="dcm_item" @click.stop='openDetail(item)' v-for="item in dataList">
							<div class="dcm_itemicon">
								<img :src="basedcm + item.imageUrl" />
								<div class="dcm_itembody">{{ item.modalityName }}</div>
							</div>
							<div class="dcm_itemP1 text-ellipsis">{{ item.dcmName }}</div>
							<div class="dcm_itemP2 text-ellipsis"><i class="el-icon-s-custom"></i>浏览人数:{{ item.viewNumber
								|| 0}}</div>
							<div class="case_itemP8 hover_active" @click.stop="checkCollect(item, false)">
								<img src="@/images/case_itemP81.png" class="normal" />
								<img src="@/images/case_itemP82.png" class="active" />
							</div>
						</div>
					</div>
					<div class="index_mainpages ">
						<el-pagination hide-on-single-page background @current-change="currentChange"
							:current-page="pageNum" :page-size="pageSize" layout="total,  prev, pager, next, jumper"
							:total="total">
						</el-pagination>
					</div>
				</div>
			</div>
			<div class="center_rightcont beautifulScroll" v-if="type == 'CASE'">
				<div class="center_rightable">
					<div class="center_rightable_search">
						<el-select @change='currentCaseChange(1)' v-model="modalityCaseId" placeholder="请选择检查方式"
							size='small' style="width:200px;margin: 0 10px 0 0;" clearable>
							<el-option v-for="item in modalitys" :key="item.modalityId" :label="item.modalityName"
								:value="item.modalityId">
							</el-option>
						</el-select>
						<el-input @keyup.enter.native="currentCaseChange(1)" placeholder="请输入病例名称"
							prefix-icon="el-icon-search" v-model="caseName" size='small'
							style="width:200px;margin: 0 10px 0 0;" clearable />
						<el-button type="primary" @click="currentCaseChange(1)" size='small'>搜索</el-button>
						<el-button type="primary" @click="researchCase" size='small'>重置</el-button>
					</div>
					<div class="clearfix">
						<emptymain :emptytext="'暂无数据'" :emptyheight="'550px'" :emptylist='dataCaseList'>
							<span></span>
						</emptymain>
						<div class="case_item" @click.stop='openCase(item)' v-for="item in dataCaseList">
							<div class="case_itemP1 text-ellipsis">{{ item.caseName }}</div>
							<div class="case_itemP2 clearfix">
								<div class="case_itemP3">{{ item.modalityName || '-' }}</div>
								<div class="case_itemP4">
									<div class="case_itemP5 text-ellipsis">{{ item.systemName }}</div>
									<div class="case_itemP6">
										<span class="case_sex_m" v-if="item.patientSex == 'M'">
											<i class="el-icon-male"></i>
										</span>
										<span class="case_sex_f" v-if="item.patientSex == 'F'">
											<i class="el-icon-female"></i>
										</span>
										<span class="case_itemP6span">{{ item.patientAge }}岁</span>
										<span>病历号:{{ item.number }}</span>
									</div>
								</div>
							</div>
							<div class="case_itemP7"><i class="el-icon-s-custom"></i>浏览人数:{{ item.viewNumber || 0 }}</div>
							<div class="case_itemP8 hover_active">
								<img src="@/images/case_itemP81.png" class="normal" />
								<img src="@/images/case_itemP82.png" class="active" />
							</div>
							<div class="case_itemP8 hover_active" @click.stop="checkCollectCase(item, false)">
								<img src="@/images/case_itemP81.png" class="normal" />
								<img src="@/images/case_itemP82.png" class="active" />
							</div>
						</div>
					</div>
					<div class="index_mainpages">
						<el-pagination hide-on-single-page background @current-change="currentCaseChange"
							:current-page="pageCaseNum" :page-size="pageCaseSize"
							layout="total,  prev, pager, next, jumper" :total="totalCase">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { modalityList, imageList, collectImg } from '@/api/image.js'
import { caseList, collectCase } from '@/api/case.js'
export default {
	data() {
		return {
			type: 'DCM',
			types: [{
				name: '影像数据库',
				value: 'DCM'
			}, {
				name: '诊断思维练习',
				value: 'CASE'
			}],
			pageSize: 10,
			modalitys: [],
			modalityId: '',
			dcmName: '',
			dataList: [],
			pageNum: 1,
			total: 0,

			caseName: '',
			modalityCaseId: '',
			dataCaseList: [],
			pageCaseSize: 12,
			pageCaseNum: 1,
			totalCase: 0,
		}
	},
	created() {
		this.getModalityList();
		this.getDataList();
		this.getDataCaseList();

	},
	mounted() {

	},
	methods: {
		openCase(item) {
			const routeUrl = this.$router.resolve({
				name: 'caseimage',
				query: {
					caseId: item.caseId,
				}
			})
			window.open(routeUrl.href, '_blank')
		},
		openDetail(item) {
			const routeUrl = this.$router.resolve({
				name: 'imagedetail',
				query: {
					dcmId: item.dcmId,
					stuuid: item.stuuid,
				}
			})
			window.open(routeUrl.href, '_blank')
		},
		changeType(item) {
			if (this.type != item.value) {
				this.type = item.value
			}
		},
		getModalityList() {
			modalityList({}).then(res => {
				this.modalitys = res.data || [];
			})
		},
		checkCollect(item, collect) {
			var message = collect ? '确定收藏此影像?' : '确定取消收藏此影像?'
			this.$confirm(message, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			}).then(() => {
				collectImg({
					dcmId: item.dcmId,
					collect
				}).then(res => {
					if (res.code == 200) {
						this.getDataList()
					} else {
						this.$message({
							type: 'error',
							message: res.message
						})
					}
				})
			}).catch(() => { })
		},
		research() {
			this.dcmName = '';
			this.modalityId = '';
			this.currentChange(1)
		},
		currentChange(pageNum) {
			this.pageNum = pageNum;
			this.getDataList();
		},
		getDataList() {
			imageList({
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				modalityId: this.modalityId,
				dcmName: this.dcmName,
				sort: 3,
			}).then(res => {
				this.dataList = res.data.list;
				this.total = res.data.total;
			})
		},
		checkCollectCase(item, collect) {
			var message = collect ? '确定收藏此案例?' : '确定取消收藏此案例?'
			this.$confirm(message, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			}).then(() => {
				collectCase({
					caseId: item.caseId,
					collect
				}).then(res => {
					if (res.code == 200) {
						this.getDataCaseList()
					} else {
						this.$message({
							type: 'error',
							message: res.message
						})
					}
				})
			}).catch(() => { })
		},
		researchCase() {
			this.caseName = '';
			this.modalityCaseId = '';
			this.currentCaseChange(1)
		},
		currentCaseChange(pageNum) {
			this.pageCaseNum = pageNum;
			this.getDataCaseList();
		},
		getDataCaseList() {
			caseList({
				pageSize: this.pageCaseSize,
				pageNum: this.pageCaseNum,
				modalityId: this.modalityCaseId,
				caseName: this.caseName,
				sort: 3,
			}).then(res => {
				this.dataCaseList = res.data.list;
				this.totalCase = res.data.total;
			})
		},
	},
}
</script>